import React from 'react'
import { Link, NavLink, history } from 'umi'
import { Button } from 'antd'
import './index.less'

const layouts = (props: any) => {
  
  const gotopage = () => {
    history.push({
      pathname: '/user/one'
    })
  }

  return (
    <div>
      <h1>head</h1>
      <hr />
      {/* 引入内容子组件 */}
      {props.children}
      <hr />
      <h1>foot</h1>
      <hr />
      <hr />
      <hr />
      {/* Link声明式跳转 */}
      <div style={{ width: '200px', height: '100px', background: 'pink' }}>
        <Link to="/home">Go to home</Link> <br />
        <Link to="/user/one">Go to user1 page</Link> <br />
        <Link to="/user/two">Go to user2 page</Link> <br />
        <Link to="/user/three/8888">Go to user3 page</Link>
      </div>
      {/* NavLink声明式跳转 */}
      <div style={{ width: '200px', height: '100px', background: '#999' }}>
        <NavLink to="/home">Go to home</NavLink> <br />
        <NavLink to="/user/one">Go to user1 page</NavLink> <br />
        <NavLink to="/user/two">Go to user2 page</NavLink> <br />
        <NavLink to="/user/three/8888">Go to user3 page</NavLink>
      </div>
      {/* 命令式跳转 */}
      <div style={{ width: '200px', height: '100px', background: 'green' }}>
        <Button type="primary" onClick={gotopage}>user1</Button><br />
      </div>
    </div>
  )
}

export default layouts
